<template>
	<view class="order">
		<!-- 列表 -->
		<view class="year">
			<view class="left">
				拓展年份选择
			</view>
			<view class="right" @click="show = true">
				<view class="">
					{{value}}
				</view>
				<u-icon class="icon" name="arrow-down" color="#BABABA" size="12"></u-icon>
			</view>
		</view>
		<view class="listBox">
			<view class="list" v-for="(item,index) in list" :key="index" >
				<view class="list_t">
					<view class="list_t_r">
						<view class="list_t_r_t ">
							<view class="name">{{'收益'}}</view>
						</view>
						<view class="time">{{item.year||''}}-{{item.month||''}}</view>
					</view>
				</view>
				<view class="right">
					<view class="time">￥{{item.price||''}}</view>
				</view>
			</view>
			<!-- 提示栏 -->
			<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
		</view>
		<view class="bott">
			<view class="left">
				<view class="">
					我的人员拓展总收益：
				</view>
				<view class="text">
					￥{{total||0}}
				</view>
			</view>
			<!-- <view class="" style="width: 34%;" @tap.stop="toCard">
				<But text="立即提现"></But>
			</view> -->
		</view>
		<u-datetime-picker :show="show" mode="year" @confirm="chooseYear" v-model="today"  closeOnClickOverlay @close="show = false"
			 @cancel="clearDate" cancelText='清空'></u-datetime-picker>
	</view>
</template>

<script>
	import {
		commissionList
	} from "@/request/myApi.js";
	import But from "@/components/Button/index.vue"
	export default {
		components: {
			But
		},
		data() {
			return {
				show: false,
				tabCurrent: 1,
				value: '',
				today: Number(new Date()),
				page: 1,
				list: [],
				isText: '',
				last_page: 1,
				total: '',
				closeIcon: false,
			};
		},

		onLoad() {


		},
		onShow() {
			this.list = []
			this.page = 1
			this.isText = ''
			this.myList()
		},
		methods: {
			onclear() {

			},
			// 提现
			toCard() {
				uni.navigateTo({
					url: `/pages/home/heritageDetails?total=${this.total}`
				})
			},
			clearDate(){
				this.value = ''
				this.show = false
				this.list = []
				this.page = 1
				this.isText = ''
				this.myList()
			},
			// 选择年月
			chooseYear(e) {
				this.value = this.$TimeFormat(e.value, 'yyyy')
				this.show = false
				this.list = []
				this.page = 1
				this.isText = ''
				this.myList()
			},
			// 获取佣金列表
			myList() {
				let that = this
				commissionList({
					limit: 20,
					page: that.page,
					year: that.value
				}).then((res) => {
					if (res.code == 200) {
						res.data.list.length == 0 ? that.isText = '暂无数据' : that.isText = ''
						that.total = res.data.price
						that.list = that.list.concat(res.data.list)
						that.last_page = Math.ceil(res.data.count / res.data.list.length)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}

				});
			},
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				that.myList()
			}
		}

	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.boxIcon {
		position: absolute;
		right: 5%;
		top: 2%;
	}

	.bott {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 110rpx;
		background: #fff;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx 40rpx;
		justify-content: space-between;
		box-shadow: 0 0 20rpx rgba(228, 228, 228, 0.5);
		box-sizing: border-box;
		z-index: 100;
		font-size: 28rpx;
		color: #58B99D;

		.left {
			display: flex;
			justify-content: space-between;
			width: 98%;
		}

		.text {
			color: #FF454E;
		}
	}

	.order {
		width: 100vw;

		.year {
			margin: 20rpx;
			font-size: 28rpx;
			height: 60rpx;
			display: flex;

			.left {
				width: 32%;
				height: 40rpx;
				line-height: 40rpx;
				margin: 8rpx 0;
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0px;
			}

			.right {
				width: 68%;
				height: 54rpx;
				line-height: 54rpx;
				background: #F8F8F8;
				padding: 0 20rpx 0 30rpx;
				display: flex;
				font-size: 26rpx;
				justify-content: space-between;
			}
		}

		.listBox {
			width: 95%;
			margin: 0rpx auto;

			.list {
				width: 100%;
				height: auto;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				background-color: #F7F7F7;
				margin: 20rpx auto;
				box-sizing: border-box;
				-moz-box-shadow: 0 0 10px #f2f2f2;
				-webkit-box-shadow: 0 0 10px #f2f2f2;
				box-shadow: 0 0 10px #f2f2f2;
				display: flex;
				justify-content: space-between;

				.right {
					width: 24%;

					.time {
						margin: 34rpx 0;
						color: #58B99D;
					}
				}

				.list_t {
					.list_t_r {
						width: 100%;

						.list_t_r_t {
							font-size: 28rpx;
							font-weight: 400;

							.name {
								margin: 10rpx 0;
								font-weight: 600;
							}
						}

						.time {
							font-size: 24rpx;
							font-weight: 400;
							color: #979797;
							margin: 6rpx 0;
						}
					}
				}
			}
		}
	}
</style>